<template>
  <grimm-page type="popup-view" title="DatePicker">
    <template slot="content">
      <div>
        <grimm-button block class="picker-btn" @click="showDatePicker">Date Picker</grimm-button>
        <grimm-button block class="picker-btn" @click="showChangeOrderPicker">Date Picker(Change order)</grimm-button>
        <grimm-button block class="picker-btn" @click="showTimePicker">Time Picker</grimm-button>
        <grimm-button block class="picker-btn" @click="showDateTimePicker">Date Time Picker</grimm-button>
        <grimm-button block class="picker-btn" @click="showFormatPicker">Use format</grimm-button>
        <grimm-button block class="picker-btn" @click="showUpdatePropsPicker">Use $updateProps</grimm-button>
      </div>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
export default {
  components: { GrimmPage },
  data() {
    return {
      type: 'popup-dialog',
      mask: true,
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      position: '',
      multiList: [
        [
          { text: '剧毒v', value: '剧毒' },
          { text: '蚂蚁v', value: '蚂蚁' },
          { text: '幽鬼v', value: '幽鬼' },
        ],
        [
          { text: '输出v', value: '输出' },
          { text: '控制v', value: '控制' },
          { text: '核心v', value: '核心' },
          { text: '爆发v', value: '爆发' },
          { text: '输出2v', value: '输出2' },
          { text: '控制3v', value: '控制3' },
          { text: '核心4v', value: '核心4' },
          { text: '爆发5v', value: '爆发5' },
          { text: '输出6v', value: '输出6' },
          { text: '控制7v', value: '控制7' },
          { text: '核心8v', value: '核心8' },
          { text: '爆发9v', value: '爆发9' },
        ],
      ],
    };
  },
  methods: {
    showDatePicker() {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          title: 'Date Picker',
          min: new Date(2008, 7, 8),
          max: new Date(2020, 9, 20),
          value: new Date(),
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle,
          onChange: () => {
            console.log('change');
          },
        });
      }

      this.datePicker.show();
    },
    showTimePicker() {
      if (!this.timePicker) {
        this.timePicker = this.$createDatePicker({
          title: 'Time Picker',
          min: [8, 0, 0],
          max: [20, 59, 59],
          value: new Date(),
          startColumn: 'hour',
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle,
        });
      }

      this.timePicker.show();
    },
    showDateTimePicker() {
      if (!this.dateTimePicker) {
        this.dateTimePicker = this.$createDatePicker({
          title: 'Date Time Picker',
          min: new Date(2008, 7, 8, 8, 0, 0),
          max: new Date(2020, 9, 20, 20, 59, 59),
          value: new Date(),
          columnCount: 6,
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle,
        });
      }

      this.dateTimePicker.show();
    },
    showFormatPicker() {
      if (!this.formatPicker) {
        this.formatPicker = this.$createDatePicker({
          title: 'Use format',
          min: new Date(2008, 7, 8),
          max: new Date(2020, 9, 20),
          value: new Date(),
          format: {
            year: 'YY年',
            month: 'MM月',
            date: '第 D 日',
          },
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle,
        });
      }

      this.formatPicker.show();
    },
    showUpdatePropsPicker() {
      if (!this.updatePropsPicker) {
        this.updatePropsPicker = this.$createDatePicker({
          title: 'Use $updateProps',
          min: new Date(2008, 7, 8),
          max: new Date(2020, 9, 20),
          value: new Date(),
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle,
        });
      }

      this.updatePropsPicker.show();
      setTimeout(() => {
        this.updatePropsPicker.$updateProps({
          title: 'updated',
          value: new Date(2010, 9, 1),
        });
      }, 1000);
    },
    showChangeOrderPicker() {
      if (!this.changeOrderPicker) {
        this.changeOrderPicker = this.$createDatePicker({
          title: 'Date Picker',
          min: new Date(2008, 7, 8),
          max: new Date(2020, 9, 20),
          value: new Date(),
          columnOrder: ['date', 'month', 'year'],
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle,
        });
      }

      this.changeOrderPicker.show();
    },
    selectHandle(date, selectedVal, selectedText) {
      console.log(date, selectedVal, selectedText);
    },
    cancelHandle() {
      console.log('cancel');
    },
  },
};
</script>

<style lang="stylus" >
.popup-view {
  .content > div {
    margin: 10px 0;
  }
  .picker-btn{
    margin-bottom 10px
  }
}

.grimm-my-popup {
  .grimm-popup-center {
    .grimm-popup-content {
      padding: 20px;
    }
  }

  .grimm-popup-content {
    padding: 80px 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
  }
}

.grimm-extend-popup {
  .grimm-extend-popup-content {
    padding: 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
  }
}
</style>
